<template>
  <q-input @focus="showClearButton = true" @blur="showClearButton = false" @input="handleInput" >
    <template v-slot:append>
      <q-icon v-if="showClearButton" name="close" class="cursor-pointer" @click="清除" />
    </template>
  </q-input>
 <!-- aaa {{ $attrs }}aaa -->
</template>

<script setup>
import { ref ,toRefs ,getCurrentInstance } from 'vue';
const showClearButton = ref(false)
function handleInput() {
  // 当输入框内容改变时，检查是否需要显示清除按钮
  showClearButton.value = internalValue !== '';
}
const self = getCurrentInstance();
console.log(`self👉`,self)
// const props = defineProps();
// 使用 defineProps 定义一个接收所有属性的 prop
// const props = defineProps({
//   ...(Object.keys(defineProps({})).reduce((acc, key) => {
//     acc[key] = String; // 假设所有属性都是字符串类型
//     return acc;
//   }, {}))
// });
// console.log(`props👉`,props)
// const { $attrs } = toRefs(props);
const emit=defineEmits(['update:modelValue'])


function 清除() {
  // console.log(`self.attrs.modelValue👉`,self.attrs.modelValue)
  // self.attrs.modelValue=''
  // onUpdate:modelValue
  // 被拦截了，下层组件就收不到了
  emit('update:modelValue','')
}

</script>

<style scoped>
.q-input__append-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
